<template>
	<view class="pageBg">
		<swiper class="banner">
			<swiper-item class="swiper-item" v-for="(i, index) in data.img">
				<divImg class="swiper-item" :src="i"></divImg>
			</swiper-item>
		</swiper>
		<view class="mainbox">
			<view class="title">
				{{ data.title }}
			</view>
			<view class="desc">
				{{ data.desc }}
			</view>
			<view class="price">
				{{ data.price }}
			</view>
		</view>
		<view class="memberIntroduction">
			<view class="title">会员介绍</view>
			<view class="content" v-html="imgAddStyle(data.content)"></view>
		</view>
		<view class="bottomBox">
			<view class="btn" @click="activateNow">立即开通</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			async init() {
				const res = await this.$api.VipGetGoods();
				this.data = res.data;
			},
			async activateNow() {
				const pages = getCurrentPages();
				const page = pages[pages.length - 2]?pages[pages.length - 2]:pages[pages.length - 1];
				
				let route = page.route;
				let i = 0;
				let sym = '?';
				for (let key in page.options) {
					sym = i === 0 ? '?' : '&';
					++i;
					route = route + sym + key + '=' + page.options[key];
					sym='&'
				}
				route = route + sym + 'play=true';
			
				const res = await this.$api.VipPlaceOrder({ vip_id: this.data.id, url: this.networkIndistinguishable + route });
				
				document.querySelector('body').innerHTML = res.data;
				document.forms[0].submit();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		padding-bottom: calc(var(--window-bottom) + 200rpx);
		.banner {
			width: 100%;
			height: 420rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}
		.mainbox {
			height: 190rpx;
			background: #ffffff;
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			.title {
				color: #000000;
				font-size: $uni-font-size-15;
				margin-left: $margin-width;
			}
			.desc {
				color: #999999;
				font-size: $uni-font-size-12;
				margin-left: $margin-width;
			}
			.price {
				color: $price-color;
				font-size: $uni-font-size-12;
				margin-left: $margin-width;
			}
		}
		.memberIntroduction {
			.title {
				margin-top: $margin-width;
				color: #000000;
				font-size: $uni-font-size-14;
				margin-left: $margin-width;
			}
		}
		.bottomBox {
			position: fixed;
			left: 0;
			bottom: 0;
			height: 133rpx;
			width: 100%;
			background-color: $content-bg-colcor;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			.btn {
				width: 690rpx;
				height: 80rpx;
				background: $price-color;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-size: $uni-font-size-15;
			}
		}
	}
</style>
